<template>
	<view class="content">
		<!-- 距离顶部的距离 刚好留出状态栏即可 即statusBarHeight -->
		<view class="topNav" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">
			<view class="nav-left">
				返回
			</view>
			<view class="nav-title">
				我的客服
			</view>
		</view>

		<view class="body-content">
			<view class="bd-box">
				<view class="t-left">
					<view class="t-tit">
						哈喽,有什么可以帮助您？
					</view>
					<view class="t-desc">
						智能客服为您服务
					</view>
				</view>
				<view class="t-right">
					<image src="../../static/top.png" mode="widthFix" style="width: 150rpx;"></image>
				</view>
			</view>

			<view class="bd-type">
				<view class="bd-item">
					<image src="../../static/th.png" mode="widthFix" style="width: 80rpx;"></image>
					<view class="bd-tit">
						咨询分类
					</view>
				</view>
				<view class="bd-item">
					<image src="../../static/tk.png" mode="widthFix" style="width: 80rpx;"></image>
					<view class="bd-tit">
						问题分类
					</view>
				</view>
				<view class="bd-item">
					<image src="../../static/wt.png" mode="widthFix" style="width: 80rpx;"></image>
					<view class="bd-tit">
						关于退货
					</view>
				</view>
				<view class="bd-item">
					<image src="../../static/type.png" mode="widthFix" style="width: 80rpx;"></image>
					<view class="bd-tit">
						如何退款
					</view>
				</view>
			</view>

			<view class="lists">
				<view class="l-item">
					<view class="l-left">
						<text>1</text>
						<text>如何注销账户？</text>
					</view>
					<view class="l-right">
						<image src="../../static/right.png" mode=""></image>
					</view>
				</view>
				<view class="l-item">
					<view class="l-left">
						<text>2</text>
						<text>如何退货？</text>
					</view>
					<view class="l-right">
						<image src="../../static/right.png" mode=""></image>
					</view>
				</view>
				<view class="l-item">
					<view class="l-left">
						<text>3</text>
						<text>如何联系在线客服？</text>
					</view>
					<view class="l-right">
						<image src="../../static/right.png" mode=""></image>
					</view>
				</view>
				<view class="l-item">
					<view class="l-left">
						<text>4</text>
						<text>如何退款？</text>
					</view>
					<view class="l-right">
						<image src="../../static/right.png" mode=""></image>
					</view>
				</view>
				<view class="l-item">
					<view class="l-left">
						<text>5</text>
						<text>如何退款？</text>
					</view>
					<view class="l-right">
						<image src="../../static/right.png" mode=""></image>
					</view>
				</view>
				<view class="l-item">
					<view class="l-left">
						<text>6</text>
						<text>如何退款？</text>
					</view>
					<view class="l-right">
						<image src="../../static/right.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-box">
			<view class="bottom-item">
				<image src="../../static/kf.png" mode="widthFix"></image>
				<text>咨询客服</text>
			</view>
			<view class="bottom-item">
				<image src="../../static/call.png" mode="widthFix"></image>
				<text>电话客服</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				navHeight: "", // 导航栏高度
				statusBarHeight: '', // 状态栏高度
			}
		},
		onLoad() {
			//获取手机系统的信息 里面有状态栏高度和设备型号
			let {
				statusBarHeight,
				system
			} = uni.getSystemInfoSync()
			// 注意返回的单位是px 不是rpx
			console.log('状态栏高度是', statusBarHeight + 'px', '设备型号是', system);
			this.statusBarHeight = statusBarHeight
			// 而导航栏的高度则 = 状态栏的高度 + 判断机型的值（是ios就+40，否则+44）
			// 这个高度刚好和胶囊对齐
			this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44)
			console.log(this.navHeight, "导航栏高度");
		},

		methods: {

		}
	}
</script>

<style scoped>
	.topNav {
		height: 100rpx;
		background: linear-gradient(to bottom, transparent -100px, #fff 300px),
			linear-gradient(to right, #D2EEF9, #FFD1DE);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.body-content {
		background: linear-gradient(to bottom, transparent -100px, #fff 300px),
			linear-gradient(to right, #e3f6fd, #ffd1decc);
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.bd-box {
		height: 200rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.t-left {
		width: 80%;
	}

	.t-tit {
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.t-desc {
		font-size: 28rpx;
		color: #777;
	}

	.nav-left {
		font-size: 28rpx;
		color: #000000;
		margin-right: 30rpx;
	}


	.bd-type {
		padding: 20rpx 35rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.bd-item {
		text-align: center;
	}

	.bd-item image {
		width: 75rpx;
		margin-bottom: 10rpx;
	}

	.bd-tit {
		font-size: 28rpx;
	}

	.nav-title {
		width: 78%;
		text-align: center;
		font-size: 30rpx;
		color: #000000;
	}

	.placClass {
		font-size: 24rpx;
		color: #fff;
	}



	.lists {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 10rpx;
	}

	.l-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 15rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f5f5f5;
	}

	.lists .l-item .l-left text:nth-child(1) {
		color: #777;
	}

	.lists .l-item:nth-child(1) .l-left text:nth-child(1) {
		color: red;
	}

	.lists .l-item:nth-child(2) .l-left text:nth-child(1) {
		color: orange;
	}

	.lists .l-item:nth-child(3) .l-left text:nth-child(1) {
		color: green;
	}

	.l-item .l-left {
		display: flex;
		justify-content: start;
		align-items: center;
	}

	.l-left text:nth-child(1) {
		font-size: 30rpx;
		font-weight: 600;
		margin-right: 20rpx;
	}

	.l-left text:nth-child(2) {
		font-size: 28rpx;
		font-weight: 600;
		color: #4b4b4b;
	}

	.l-item .l-right image {
		width: 38rpx;
		height: 38rpx;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #eee;
	}

	.bottom-item {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-item image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.bottom-item text {
		font-size: 28rpx;
	}
</style>